<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-07-30 20:02:30
 * @LastEditTime: 2020-02-28 11:25:38
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css">
    <script type="text/javascript" src="../script/jquery.js"></script>
    <script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="../script/vue.min.js"></script>
    <script type="text/javascript" src="../script/vant.min.js"></script>
    <script type="text/javascript" src="../script/fastclick.js"></script>
    <script type="text/javascript" src="../script/base.js"></script>
    <style>
        .topSearch {
            top: 0;
            width: 100%;
            height: 50px;
            display: flex;
        }

        .van-cell {
            background-color: transparent;
            width: 30%;
            border-bottom: 0;
        }

        .van-field__control {
            border-bottom: 2px solid #e6c678;
        }


        .topSearch .van-button {
            margin: auto;
            margin-left: 20px;
        }

        .top {
            width: 100%;
            height: 35px;
        }

        .top .van-button {
            margin-top: 10px;
            margin-left: 5px;
            padding: 10px 20px;
        }
        .table {
            height: 85vh;
            overflow-y: auto;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="box">
            <div class="topSearch">
                <van-field v-model="name" label="姓名:" placeholder="请输入员工姓名"></van-field>
                <van-field v-model="card" label="工号:" placeholder="请输入员工工号"></van-field>
                <van-button color="linear-gradient(#fffeaa, #c07d39)" type="primary" @click="search" size="mini">确认搜索
                </van-button>
            </div>
            <div class="table">
                <table>
                    <tr>
                        <th width="50%">姓名</th>
                        <th width="50%">工号</th>
                    </tr>

                    <tr v-for="item in tableData" @click="personClick(item)">
                        <td>{{item.Name}}</td>
                        <td>{{item.pin}}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</body>

<script type="text/javascript">
    var vm;
    apiready = function () {

        api.addEventListener({
            name: 'refreshChoosePlan'
        }, function (ret) {
            vm.tabClick()
        })

        vm = new Vue({
            el: '#app',
            data: {
                tableData: [],
                card: '',
                name: '',
                roleName: ''
            },
            created: function () {
                var that = this;

                if (window.localStorage.getItem('clientHeight') != 752) {
                    document.getElementById('app').style.zoom = 0
                } else {
                    document.getElementById('app').style.zoom = 1.5
                }
            },
            methods: {
                historyBack() {
                    var that = this
                    api.openFrame({
                        name: 'home',
                        url: 'home.html',
                        rect: {
                            x: 0,
                            y: 65,
                            w: 'auto',
                            h: api.winHeight - 110 - api.safeArea.bottom
                        },
                        bgColor: '#29292a',
                        useWKWebView: true,
                        historyGestureEnabled: false,
                        pageParam: api.pageParam
                    })
                },
                search() {
                    var that = this
                    var obj = {
                        name: that.name,
                        pin: that.card,
                    }
                    APP.ajax('ZS_HelpLogin', obj, function (res) {

                        that.tableData = res.ds
                    })
                },
                personClick(personItem) {
                    var that = this
                    window.localStorage.setItem('loginName', personItem.Name)
                    window.localStorage.setItem('card_no', personItem.card_no)
                    window.localStorage.setItem('pin', personItem.pin)
                    that.getRole(personItem.pin)
                },
                getRole(pin) {
                    var that = this
                    APP.ajax('getZSGKRole', { pin: pin }, function (res) {
                        if (res.ds[0] && res.ds[0].RoleName) {
                            if (res.ds[0].RoleName == "管理员") {
                                that.roleName = '管理员'
                            } else if (res.ds[0].RoleName == "上下模") {
                                that.roleName = '上下模'
                            } else if (res.ds[0].RoleName == "组长") {
                                that.roleName = '组长'
                            }
                        } else {
                            that.roleName = '员工'
                        }

                        api.pageParam.loginTime = that.getFormatTime(new Date())
                        api.pageParam.roleName = that.roleName
                        api.openFrame({
                            name: 'index',
                            url: 'index.html',
                            reload: true,
                            slidBackEnabled: false,
                            bgColor: '#29292a',
                            pageParam: api.pageParam
                        })
                    })
                },
                getFormatTime(date) {
                    var that = this
                    var seperator1 = "-";
                    var seperator2 = ":";
                    var month = date.getMonth() + 1;
                    var strDate = date.getDate();
                    var hour = date.getHours();
                    var minute = date.getMinutes();
                    var second = date.getSeconds();
                    if (month >= 1 && month <= 9) {
                        month = "0" + month;
                    }
                    if (strDate >= 0 && strDate <= 9) {
                        strDate = "0" + strDate;
                    }
                    if (hour >= 0 && hour <= 9) {
                        hour = "0" + hour;
                    }
                    if (minute >= 0 && minute <= 9) {
                        minute = "0" + minute;
                    }
                    if (second >= 0 && second <= 9) {
                        second = "0" + second;
                    }
                    var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
                        + " " + hour + seperator2 + minute
                        + seperator2 + second;
                    return currentdate;
                },
            }
        })
    };
</script>

</html>